import React, { useState } from "react";
import './demand.css'
import Footer from 'components/Footer'
import { type } from "@testing-library/user-event/dist/type";
import { Tabs } from "antd-mobile";
import classNames from "classnames";
import * as api from 'api/index'
//导入ui库
import { Toast } from 'antd-mobile'
function Demand() {
  //获取输入框的值
  let [phone, setPhone] = useState('')
  let [contact, setcontact] = useState('')



  //出游人数 
  let [peopleNums, setpeopleNum] = useState('')
  const peopleNum = (num) => {
    console.log(111, num);
    setpeopleNum(
      num
    )
  }
  //type
  let [demandactive, setdemandactive] = useState('');
  const Tabss = (num2) => {
    console.log(num2);

    setdemandactive(
      num2
    )
  }
  //公司名称
  let [demandcompony, setdemandcompony] = useState('');
  const companyName = (num3) => {
    console.log('公司名称', num3);
    setdemandcompony(
      num3
    )
  }
  //渲染

  console.log(phone);
  const submit = () => {
    let params = {
      date: new Date().getTime(),
      phone: phone,
      type: demandactive,
      username: contact,
      compony: demandcompony,
    }
    console.log(2222, params);
    api.demandAdd(params).then((res) => {
      Toast.show({
        content: '提交成功 ',
      })
      console.log(res);

    })
  }
  return (
    <div className="commitdemand-box">
      <div className="app">
        {/* 顶部 */}
        <header className="flex jc-sa aic bg-fff header-index">
          <div className="flex aic return jc-sa f16">
            <i className="f24 icon iconfont icon-zuojiantou"></i>
            <span onClick={() => { history.back() }}>返回</span>
          </div>
          <img
            className="img-index"
            src="http://villa.huruqing.cn/static/media/logo.5a470abf0dc984ae9654.png"
            alt=""
          />
          <div></div>
          <div></div>
        </header>
        {/* 中间图片 */}
        <img
          className="img-banner"
          src="http://villa.huruqing.cn/static/media/demand.ca439ba905680881277d.jpeg"
          alt=""
        />

        {/* 需求选择 */}
        <div className="demand fdc aic jc-c f999 bg-fff">
          <div className="demand-box1 flex jc-sb aic bg-fff">
            <span className="f14 choose flex jc-c">旅游类型</span>
            <div className="tourism flex jc-sa aic f14">
              <span onClick={() => { Tabss('1') }} className={classNames("box-boder active-boder-gray", { demandactive: demandactive === '1' })}>家庭</span>
              <span onClick={() => { Tabss('2') }} className={classNames("box-boder active-boder-gray", { demandactive: demandactive === '2' })}>公司</span>
              <span onClick={() => { Tabss('3') }} className={classNames("box-boder active-boder-gray", { demandactive: demandactive === '3' })}>同学</span>
              <span onClick={() => { Tabss('4') }} className={classNames("box-boder active-boder-gray", { demandactive: demandactive === '4' })}>其他</span>
            </div>
          </div>
          <div className="demand-box1 flex jc-sb aic bg-fff">
            <span className="f14 choose flex jc-c">出游人数</span>
            <div className="tourism flex jc-sa aic f14">
              <span onClick={() => { peopleNum('1-5') }} className={classNames("box-boder active-boder-gray", { peopleNums: peopleNums === '1-5' })}>1-5</span>
              <span onClick={() => { peopleNum('6-10') }} className={classNames("box-boder active-boder-gray", { peopleNums: peopleNums === '6-10' })}>6-10</span>
              <span onClick={() => { peopleNum('10+') }} className={classNames("box-boder active-boder-gray", { peopleNums: peopleNums === '10+' })}>10+</span>
              <span className="box-boder22"></span>
            </div>
          </div>
          {demandactive === '2' ? <div className="demand-box1 flex jc-sb aic">
            <span className="f14 flex jc-c choose">公司名称</span>
            <div className="tourism f14">
              <input onChange={(event) => { companyName(event.target.value) }} className="phone border-input" name="name" type="text" value={demandcompony} />

            </div>
          </div> : ''}
          <div className="demand-box1 flex jc-sb aic bg-fff">
            <span className="f14 choose flex jc-c">联系姓名</span>
            <div className="tourism f14">
              {/* <span>老胡</span> */}
              <input onChange={(event) => { setcontact(event.target.value) }} className="phone border-input" name="contact" type="text" value={contact} />
            </div>
          </div>
          <div className="demand-box1 flex jc-sb aic bg-fff">
            <span className="f14 choose flex jc-c">联系电话</span>
            <div className="tourism f14">
              <input onChange={(event) => { setPhone(event.target.value) }} className="phone border-input" name="phone" type="text" value={phone} />
              {/* <span>13800000000</span> */}
            </div>
          </div>
          <div className="demand-box5 flex jc-c aic bg-fff">
            <button onClick={submit} className="submit f14">提交需求</button>
          </div>
        </div>
      </div>
      <Footer active="02" />
    </div>
  )
}


export default Demand
